<template>
  <section class="bg-gray-fa lg:pt-20 lg:pb-14 py-9">
    <div class="container mx-auto">
      <div class="lg:text-3xl text-xl text-gray-33 font-bold text-center">
        <span class="lg:inline hidden">智慧考勤 · </span>
        智慧幼儿无感考勤
      </div>
      <div class="lg:mt-4 mt-2 text-gray-66 lg:text-lg text-sm text-center">
        幼儿园教育场景，全流程、自动化 无感考勤管理平台
      </div>
      <ul
        class="
          lg:mt-16
          mt-6
          grid
          lg:grid-cols-4
          grid-cols-2
          lg:gap-4
          gap-[10px]
          text-center
          px-[10px]
        "
      >
        <li
          v-for="item in list"
          :key="item.title"
          class="
            group
            bg-white
            shadow-44
            hover:shadow-[0px_2px_20px_0px_rgba(196,23,25,0.30)]
            rounded
            lg:pt-9
            py-4
            lg:pb-12
            hover:-translate-y-5 hover-bg-red
            duration-200
          "
        >
          <img
            :src="item.icon"
            class="kid-icon lg:w-16 lg:h-16 w-14 h-14"
            alt=""
          />
          <div
            class="
              mt-2
              text-[#202020]
              group-hover:text-white
              lg:text-xl
              text-base
              font-bold
            "
          >
            {{ item.title }}
          </div>
          <ul class="lg:mt-5 mt-2">
            <li
              class="
                lg:mt-3
                mt-0
                text-[#747F92]
                group-hover:text-white
                lg:text-sm
                text-xs
                leading-6
              "
              v-for="item2 in item.text"
              :key="item2"
            >
              {{ item2 }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import icon5 from "@/assets/img/kid-icon5.png";
import icon6 from "@/assets/img/kid-icon6.png";
import icon7 from "@/assets/img/kid-icon7.png";
import icon8 from "@/assets/img/kid-icon8.png";
export default {
  data() {
    return {
      list: [
        {
          icon: icon5,
          title: "幼儿园无感签到",
          text: ["非接触式考勤方式 ", "自动抓拍无感通行"],
        },
        {
          icon: icon6,
          title: "考勤同步家长",
          text: ["考勤结果微信 ", "实时通知家长"],
        },
        {
          icon: icon7,
          title: "缺勤记录回访",
          text: ["请假上报 ", "原因记录", "每日回访记录"],
        },
        {
          icon: icon8,
          title: "园所可视化分析",
          text: ["按照班级年级自动 ", "生成各类考勤报表"],
        },
      ],
    };
  },
};
</script>

<style scoped>
/deep/ .group:nth-child(1):hover .kid-icon {
  content: url("@/assets/img/kid-icon5-w.png");
}

/deep/ .group:nth-child(2):hover .kid-icon {
  content: url("@/assets/img/kid-icon6-w.png");
}

/deep/ .group:nth-child(3):hover .kid-icon {
  content: url("@/assets/img/kid-icon7-w.png");
}

/deep/ .group:nth-child(4):hover .kid-icon {
  content: url("@/assets/img/kid-icon8-w.png");
}
</style>